<template>
  <div class="rich_content indexBG">
    <div class="content-bg">
      <div class="content">
        <div class="left">
          <div @tap="imgClick(item.id)" :style="{backgroundImage:'url('+item.cdn+')',backgroundRepeat:'no-repeat',backgroundSize:'cover'}" v-for="item in detailData" :key="index" class="item" v-if="index%2==0">

          </div>
        </div>
        <div class="right">
          <div @tap="imgClick(item.id)" :style="{backgroundImage:'url('+item.cdn+')',backgroundRepeat:'no-repeat',backgroundSize:'cover'}" v-for="item in detailData" :key="index" class="item"  v-if="index%2==1">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {API} from "../../api";
import {hideLoading, showLoading} from "../../api/wechat";
import {showToast} from "../../utils";

export default {
  data () {
    return {
      itemId:0,
      nowIndex: 0,
      listData:[],
      detailData: [],
      pageRandom:0,
      page:1

    }
  },
  watch:{
    pageRandom:{
      handler:function(val,oldVal){
        return val;
      },
      deep:true
    }
  },
  components: {

  },
  mounted() {
    let _this = this;
    _this.itemId = this.$route.query.itemId || 0;
    //_this.getImgCategory();
    _this.getImgs();
  },
  methods: {

    imgClick(picId){
      let _this = this;
      this.$router.push({ path: '/pages/makex/main', query: { contentId: _this.itemId,picId:picId } });
    },

    getImgCategory(){
      let _this = this;
      showLoading({title:"加载中"});
      API.getImgCategory({cT:0}).then( res => {
        hideLoading();
        if(res.code == 200){
          _this.listData = res.data;
          _this.getImgs();

        }
      });
    },
    getImgs(){
      let _this = this;
      showLoading({title:"加载中"});
      API.getImgs({imgCatId:0,page:_this.page}).then( res => {
        hideLoading();
        wx.stopPullDownRefresh();
        if(res.code == 200){
          _this.detailData = res.data;

          if(res.data.length > 0){
            let data = res.data;
            if(_this.detailData == []){
              _this.detailData = data;
            } else {
              _this.detailData.push(...data);
            }
            _this.pageRandom =  Math.random();
            _this.page = _this.page +1;
          } else {
            showToast("暂无更多数据");
          }
        }
      });
    },
    onPullDownRefresh () {
      let _this = this;
      _this.page = 1;
      wx.stopPullDownRefresh();

    },

    onReachBottom () {
      let _this = this;
      console.log('xxx');
      _this.getImgs();
    },

    async selectItem(id, index) {
      this.nowIndex = index;
      //this.$router.push({ path: '/pages/pics/main', query: { itemId: itemId } });
      // const data = await get("/category/currentaction", {
      //   id: id
      // });
      // this.detailData = data.data.currentOne;
    },

  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .indexBG{
    background-color: #f0f0f0;
  }
  .content-bg {
    margin-top: 10px;
    padding-top: 5px;
    /* border-top:1px #dadada solid; */
    background-color: #eef0f0;
  }

  .content {
    clear: both;
    width: 95%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: center;
    margin: 0 auto;
  }

  .content .left, .content .right {
    width: 45%;

  }

  .item {
    display: block;
    background: #fff;
    margin-bottom: 5px;
    border-radius: 10px;
    /* box-shadow:0px 0px 5px 5px #eef0ed; */
    border: 1px #eef0ed solid;
    height: 250px;
    width: 100%;

  }
  .item img{
    width: 100%;
    height: 100%;
  }






</style>
